在CSS中,美化文字可以通過多種方式來呈現,以下是一些常用的CSS屬性和技巧,用於提升文本的美觀度:
font-sizefont-size用於設置文本的字體大小。你可以使用以下單位:
px(像素)、pt(點),例如:font-size: 16px;
em、rem,例如:font-size: 1.5em;
font-size: 120%;
範例:
p {
font-size: 18px;
}
h1 {
font-size: 2em;
}
font-familyfont-family用於設置文本的字體。通常會指定多個字體,最後是一個通用字體(如serif、sans-serif)作為回退。
範例:
body {
font-family: 'Arial', 'Helvetica', sans-serif;
}
font-weightfont-weight用於設置字體的粗細。常用值有:
normal(正常)、bold(加粗)100至900(從極細到極粗),例如:font-weight: 700;
範例:
strong {
font-weight: bold;
}
h2 {
font-weight: 600;
}
line-heightline-height用於設置文本行間距。可以使用數值、百分比、或單位。通常,值為1.5表示1.5倍的字體大小。
範例:
p {
line-height: 1.6;
}
text-aligntext-align用於設置文本的水平對齊方式。常見值有:
left
right
center
justify
範例:
h1 {
text-align: center;
}
p {
text-align: justify;
}
以上各屬性可組合使用,以控制文本的顯示效果。例如:
article {
font-family: 'Georgia', serif;
font-size: 18px;
font-weight: 400;
line-height: 1.5;
text-align: left;
}
這個例子設置了一篇文章的字體、大小、粗細、行高和對齊方式,達到易讀的排版效果。